<template>
  <div class="measure">
    <div>
      <div class="measure-icon" title="贴地距离" @click="measureType('贴地距离')">
        <img src="@/assets/images/measure/tiedijuli.png">
      </div>
      <div></div>
    </div>
    <div>
      <div class="measure-icon" title="贴地面积" @click="measureType('贴地面积')">
        <img src="@/assets/images/measure/tiedimianji.png">
      </div>
      <div></div>
    </div>
    <div>
      <div class="measure-icon" title="更多功能" ref="buttonRef" v-click-outside="onClickOutside">
        <img src="@/assets/images/measure/gengduo-gongneng.png">
      </div>
      <div></div>
    </div>
    <div>
      <div class="measure-icon" title="清理" @click="measureType('clear')">
        <img src="@/assets/images/measure/clear.png">
      </div>
      <div></div>
    </div>
    <el-popover
      ref="popoverRef"
      :virtual-ref="buttonRef"
      placement="left-end"
      trigger="click"
      width="120px"
      virtual-triggering
    >
      <div class="">
        <el-row :gutter="5">
          <el-col :span="12" class="measure-col">
            <div class="measure-div">
              <div class="measure-icon" title="空间距离" @click="measureType('空间距离')">
                <img src="@/assets/images/measure/kongjianjuli.png">
              </div>
              <div>空间距离</div>
            </div>
          </el-col>
          <el-col :span="12" class="measure-col">
            <div class="measure-div">
              <div class="measure-icon" title="三角测量" @click="measureType('三角测量')">
                <img src="@/assets/images/measure/sanjiaoceliang.png">
              </div>
              <div>三角测量</div>
            </div>
          </el-col>
          <el-col :span="12" class="measure-col">
            <div class="measure-div">
              <div class="measure-icon" title="水平面积" @click="measureType('水平面积')">
                <img src="@/assets/images/measure/shuipingmianji.png">
              </div>
              <div>水平面积</div>
            </div>
          </el-col>
          <el-col :span="12" class="measure-col">
            <div class="measure-div">
              <div class="measure-icon" title="方位角测量" @click="measureType('方位角测量')">
                <img src="@/assets/images/measure/fangwei_1.png">
              </div>
              <div>方位角测量</div>
            </div>
          </el-col>
          <el-col :span="12" class="measure-col">
            <div class="measure-div">
              <div class="measure-icon" title="坐标测量" @click="measureType('坐标测量')">
                <img src="@/assets/images/measure/zuobiaoceliang.png">
              </div>
              <div>坐标测量</div>
            </div>
          </el-col>
          <el-col :span="12" class="measure-col">
            <div class="measure-div">
              <div class="measure-icon" title="高度差测量" @click="measureType('高度差测量')">
                <img src="@/assets/images/measure/gaoducha.png">
              </div>
              <div>高度差测量</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-popover>
  </div>
</template>

<script setup>
import { ref, unref } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'
const buttonRef = ref()
const popoverRef = ref()
const emit = defineEmits(["measureType"]);
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}
function measureType(value) {
  emit('measureType',value)
}
</script>

<style lang='scss' scoped>
.measure {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translate(0%, -50%);
  height: 220px;
  width: 50px;
  pointer-events: all;
  // border: 1px solid orange;
  >div {
    margin-bottom: 10px;
    cursor: pointer;
  }
}
.measure-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.measure-div {
  margin: 5px 0px;
  display: grid;
  place-items: center;
  >div:nth-child(2) {
    font-size: 12px;
    width: 60px;
    text-align: center;
    margin-top: 2px;
  }
}
.measure-icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-color: rgba(0, 50, 50, 1);
  border: 1px solid #eef1fa;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  >img {
    height: 26px;
    width: 26px;
  }
}
.measure-icon:active {
  scale: 0.9;
}
</style>